<template>
  <div class="list-header">
    <span class="list-header-left" @click='back'>
      <i class="icon-router"></i>
      <i>返回</i>
    </span>
    <h1>{{ title }}</h1>
    <router-link :to="{path: '/'}" class="index">
      <i class="home-page"></i>
    </router-link>
  </div>
</template>
<script>
export default {
  props: {
    title: String
  },
  methods: {
    back: function () {
      if(window.history.length <= 1) {
        this.$router.push({path: '/'});
        return false;
      }else{
        this.$router.go(-1)
      }
    }
  }
};
</script>
<style lang='scss' scoped>
  .list-header{
    position: relative;
    z-index: 20;
    width: 100%;
    height: 2.347rem;
    overflow: hidden;
    background-color: #b93321;
    color: #fff;
    z-index: 9999;
    & > h1 {
      width: 70%;
      height: 100%;
      margin: 0 auto;
      line-height: 2.347rem;
      text-align: center;
      font-size: 14px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

  }
  .list-header-left {
    position: absolute;
    width: 3.2rem;
    text-align: center;
    .icon-router {
      width: .8rem;
      height: 2.347rem;
      background: url() no-repeat;
      background-size: 125%;
      background-position: 50%;
    }
  }
  .index{
    position: absolute;
    top: 0;
    right: 0;
    width: 2.667rem;
    text-align: center;
    height: 100%;
    line-height: 2.347rem;
    color: #fff;
    & > i {
      display: inline-block;
      width: .8rem;
      height: 2.347rem;
      background: url() no-repeat;
      background-size: 125%;
      background-position: 50%;
    }
  }
</style>